<template>
  <el-dialog
    class="close-dialog"
    :title="dialog.title"
    width="900px"
    :visible.sync="dialog.visible"
  >
    <div class="main type2">
      <div class="type2-title">{{ name }}</div>
      <div class="row">
        <div class="col">
          <div class="label">办案人员</div>
          <div class="value column">
            <el-button
              type="primary"
              @click="openModal"
              style="display: block"
              class="btn"
              >增加</el-button
            >
            <div v-for="(item, index) of tableDate" :key="index" class="row">
              <div class="col">
                <div class="label">律师人员</div>
                <div class="value">{{ item.name }}</div>
              </div>
              <div class="col">
                <div class="label">职务</div>
                <div class="value">{{ item.jobTitle }}</div>
              </div>
              <div class="col value center">
                <el-button type="text" @click="ondel(index)">删除</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="foot">
      <el-button
        @click="submit"
        type="primary"
        :disabled="tableDate.length == 0"
        >确定</el-button
      >
      <el-button @click="cancle">取消</el-button>
    </div>
    <userModal ref="userModal" @submit="addRow" />
  </el-dialog>
</template>

<script>
import userModal from "../customer/userModal";
import { caseprocess } from "@/api/case/case";
export default {
  components: { userModal },
  data() {
    return {
      dialog: {
        visible: false,
        title: "案件办理 ",
      },
      name: "",
      id: "",
      tableDate: [],
    };
  },
  methods: {
    //打开弹窗
    async open(row) {
      this.dialog.title = `${row.caseName}-案件办理`;
      this.id = row.id;
      this.name = row.agent || "办案人员";
      this.tableDate = [];
      this.dialog.visible = true;
    },
    //确定
    submit() {
      console.log("提交！！");
      caseprocess({ caseId: this.id, handlers: this.tableDate }).then((res) => {
        this.$message.success("办理成功！");
        this.$emit("submit");
        this.dialog.visible = false;
      });
    },
    cancle() {
      this.dialog.visible = false;
    },
    addRow(row) {
      console.log(row);
      this.tableDate.push({
        name: row.userName,
        jobTitle: row.jobTitle,
        ...row,
      });
    },
    openModal() {
      this.$refs.userModal.open();
    },
    ondel(index) {
      this.tableDate.splice(index, 1);
    },
  },
};
</script>

<style scoped lang="scss">
.close-dialog {
  .foot {
    text-align: center;
    margin-top: 20px;
  }
  .btn {
    width: 90px;
    margin-bottom: 20px;
  }
  .column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: inherit;
  }
  .center {
    justify-content: center !important;
  }
  .value {
    width: 150px;
  }
}
</style>
